<template>
	<view class="custom_fav_button">
		<view class="item_button iconfont icon-fav on" v-if="isFav" @click="cancelFavHandle"></view>
		<view class="item_button iconfont icon-fav" v-else @click="addFavHandle"></view>
	</view>
</template>

<script>
	export default {
		name:"custom-fav-button",
		props:{
			item:{
				type:Object,
				default(){
					return {}
				}
			}
		},
		data() {
			return {
				isFav: false,
				loading:false
			};
		},
		created() {
			this.isFav = this.$props.item.isFav || this.isFav;
		},
		methods:{
			addFavHandle(){
				let that = this;
				if (!this.loading){
					this.loading = true;
					this.$store.dispatch('addFav', {newsId:this.$props.item.newsId}).then(res=>{
						that.isFav = true;
					}).catch(err=>{
						console.log(err)
					}).finally(()=>{
						that.loading = false;
					})
				}
			},
			cancelFavHandle(){
				let that = this;
				if (!this.loading){
					this.loading = true;
					this.$store.dispatch('deleteFav', {newsId:this.$props.item.newsId}).then(res=>{
						that.isFav = false;
					}).catch(err=>{
						console.log(err)
					}).finally(()=>{
						that.loading = false;
					})
				}
			}
		}
	}
</script>

<style lang="less">
.custom_fav_button{
	.item_button {
		margin:0 10rpx;
		&.iconfont {
			font-size: 48rpx;
			&.on{
				color:#4cd964;
			}
		}
	}
}
</style>
